﻿
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, viewport-fit=cover" />
  <title>　</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
  <!-- 样式代码 -->
  <style>
    body section { font-size: 16px; font-family: "Microsoft YaHei"; height: 100%; }
    .red { color: red; text-decoration: line-through; }
    .del { float: right; padding-right: 30px; cursor: pointer; color: red; }
  </style>
  <script type="text/javascript" src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
<body>
  <section>
    <div id="app">
      <van-nav-bar title="TodoList">
      </van-nav-bar>
      <van-cell-group>
        <van-field id="text" v-model="text" placeholder="请输入内容" @keyup.enter="btnClick">
          <van-button slot="button" type="info" @click="btnClick">提交</van-button>
        </van-field>
      </van-cell-group>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;待完成列表项: </p>
      <van-list style="min-height:250px;">
        <todo-item v-for="(item,index) in list" :key="index" :index="index" :item="item" v-on:ckbclick="ckbClick" v-on:delclick="delClick"></todo-item>
      </van-list>
      <!-- 上边框 -->
      <div class="van-hairline--top"></div>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;已完成列表项: </p>
      <van-list style="min-height:250px;">
        <do-item v-for="(item,index) in dolist" :key="index" :index="index" :item="item" v-on:ckbclick="unCkbClick" v-on:delclick="doDelClick"></do-item>
      </van-list>
    </div>
  </section>
  <script>
    //JavaScript ES6箭头函数 封装对象
    var $localStorge = {
      tryGetItem: ( storgeItem, defaulValue ) => {
        return ( window.localStorage.getItem( storgeItem ) != null ? window.localStorage.getItem( storgeItem ) : defaulValue );
      },
      getItem: ( storgeItem ) => {
        return window.localStorage.getItem( storgeItem );
      },
      setItem: ( storgeItem, value ) => {
        window.localStorage.setItem( storgeItem, value );
      },
      removeItem: ( storgeItem ) => {
        window.localStorage.removeItem( storgeItem );
      }
    }

    function setData( list, dolist ) {
      $localStorge.setItem( 'undolist', JSON.stringify( list ) );
      $localStorge.setItem( 'dolist', JSON.stringify( dolist ) );
    }
  </script>
  <script type="text/javascript">
    var doData = $localStorge.tryGetItem('dolist', []);
    var undoData = $localStorge.tryGetItem('undolist', []);
    if (doData.length != 0) {
      doData = JSON.parse(doData);
    }

    if (undoData.length != 0) {
      undoData = JSON.parse(undoData);
    }

    Vue.component('todo-item', {
      props:['item','index'],
      template: `<van-cell><van-checkbox shape="square" @click="handelCheck(index)" style="display: inline-block;" title="选择"></van-checkbox>&nbsp;&nbsp;{{(index+1)}}.<span>{{item}}</span>&nbsp;&nbsp;<b @click="handelDelete(index)" class="del" title="删除">x</b></van-cell>`,
      methods: {
        handelCheck(index) {
          this.$emit('ckbclick',index);
        },
        handelDelete(index) {
          this.$emit('delclick',index);
        },
      }
    });

    Vue.component('do-item', {
      data() {
        return {
          done:true
        }
      },
      props:['item','index'],
      template: `<van-cell><van-checkbox ref="checkboxes" v-model="done" @click="handelCheck(index)" shape="square" style="display: inline-block;" title="选择"></van-checkbox>&nbsp;&nbsp;{{(index+1)}}.<span class="red">{{item}}</span>&nbsp;&nbsp;<b @click="handelDelete(index)" class="del" title="删除">x</b></van-cell>`,
      methods: {
        handelCheck(index) {
          this.$emit('ckbclick', index);
          this.$refs.checkboxes.toggle(true);
        },
        handelDelete(index) {
          this.$emit('delclick',index);
        }
      }
    });

    new Vue({
      el: '#app',
      data: {
        text: '',
        list: undoData,
        dolist: doData,
        undo:false,
        do: true
      },
      methods: {
        ckbClick(index) {
          const item = this.list[index];
          this.list.splice(index, 1);
          this.dolist.push(item);
          setData(this.list,this.dolist);
        },
        unCkbClick(index) {
          const item = this.dolist[index];
          this.dolist.splice(index, 1);
          this.list.push(item);
          setData(this.list,this.dolist);
				},
        btnClick() {
          var msg = document.getElementById("text").value;
          if (msg == "") {
            this.$notify('请添加内容!!!');
            document.getElementById("text").focus();
            return;
          }
          this.list.push(msg);
          this.text = "";
          setData(this.list,this.dolist);
        },
        delClick(index) {
          this.list.splice(index, 1);
          setData(this.list,this.dolist);
        },
        doDelClick( index ) {
          this.dolist.splice( index, 1 );
          setData(this.list,this.dolist);
        }
      }
    });
  </script>
</body>
</html>